<template>
	<div class="six">		
		<ul class="six-ul">
			<li class="six-li" v-for="(item,index) in Six" >
				<img :src="item.imgURL" />
				<p>{{item.txt}}</p>
			</li>
		</ul>		
	</div>
</template>

<script>
	export default{
		props:['Six'],
		data(){
			return{
				
			}
		}
	}
</script>

<style scoped>
	.six{
		width: 100%;
		margin-top: 0.5rem;
		display:  inline-block;
		background-color: #cccccc;
		padding-top: 0.2rem;
		padding-bottom: 0.6rem;
	}
	.six-ul{
		width: 95%;
		text-align: center;
		margin: 0rem auto;				
	}
	.six-li{
		width: 30%;		
		font-size: 0.28rem;
		float: left;
		margin-top: 0.3rem;
		background-color: rgba(0,0,0,0.3);
		border-radius:  5px;
		margin-left: 0.18rem;
		margin-bottom: 0rem;
		padding-bottom: 0rem;
		height: 1.3rem;
	}
	.six-li img{
		width: 100%;
		border-radius:  5px;
		position: relative;
		height: 100%;
	}
	.six-li p{
		position: absolute;
		margin-top: -40px;
		margin-left: 27px;
		color: white;
		font-weight: bold;
	}
	
</style>
